<template>
  <common-view class="lottery-form-page">
    <design-view>
      <van-form
        class="form"
        :show-error-message="false"
        :show-error="false"
        validate-trigger="onSubmit"
        validate-first
        @submit="onSubmit"
        @failed="onFailed">
        <div class="form-container">
          <img src="../assets/img/form_title.png" class="title" alt=""/>
          <div class="award-name">{{prize.text}}</div>
          <img src="../assets/img/form_desc.png" alt="" class="desc"/>
          <div class="field-container">
            <van-field
              center
              label="联系人"
              name="uname"
              v-model.trim="uname"
              :rules="rules.uanme"
              placeholder="联系人姓名">
              <template #label>
                <span>联<em></em>系<em></em>人</span>
              </template>
            </van-field>
          </div>
          <div class="field-container">
            <van-field
              center
              label="联系电话"
              name="mobile"
              v-model.trim="mobile"
              :rules="rules.mobile"
              placeholder="请保证该号码畅通"
              maxlength="11"
              type="tel"></van-field>
          </div>
          <div class="field-container">
            <van-field
              center
              name="addr"
              label="收货地址"
              v-model.trim="addr"
              :rules="rules.addr"
              placeholder="请留下有效收货地址"></van-field>
          </div>
        </div>
        <van-button class="btn btn-submit  animate__animated animate__headShake animate__infinite" :disabled="disabled" native-type="submit">提交</van-button>
      </van-form>
    </design-view>
    <van-popup
      class="popup"
      position="center"
      transition = "fade"
      v-model="showPopup">
        <div class="submit_success_container">
          <img src="../assets/img/submit_success_text.png" alt="" class="submit_success_title"/>
          <van-button class="dialog_award_btn dialog_share_btn" @click="onOpenShare">邀请好友讲故事</van-button>
          <van-button class="dialog_award_btn" @click="onNextPage">查看我的故事</van-button>
        </div>
    </van-popup>
    <van-popup class="popup"
      @click="onCloseShare"
      position="center"
      v-model="showSharePopup"
      get-container="body"
      transition = "fade">
        <img src="../assets/img/share_tips.png" class="tips" alt=""/>
    </van-popup>
  </common-view>
</template>
<script>
import { Field, Form, Button, Dialog, Toast, Popup } from 'vant'
import { isDev } from '@/common/config'
import { mapGetters } from 'vuex'
import { postLotteryInfo } from '@/common/api'
export default {
  name: 'LotteryFormView',
  components: {
    [Field.name]: Field,
    [Form.name]: Form,
    [Button.name]: Button,
    [Popup.name]: Popup
  },
  data () {
    return {
      uname: isDev ? '张海' : '',
      mobile: isDev ? '18251856489' : '',
      addr: isDev ? '江苏省南京市' : '',
      showPopup: false,
      showSharePopup: false,
      rules: {
        uanme: [
          { required: true, message: '请输入联系人姓名' }
        ],
        mobile: [{ required: true, message: '请输入联系电话', pattern: /1\d{10}/ }],
        addr: [{ required: true, message: '请输入有效收货地址' }]
      }
    }
  },
  computed: {
    disabled () {
      return !(this.uname.length && this.mobile.length && this.addr.length)
    },
    ...mapGetters(['prize'])
  },
  methods: {
    onOpenShare () {
      this.showSharePopup = true
      this.$sound && this.$sound.play()
    },
    onCloseShare () {
      this.showSharePopup = false
      this.$sound && this.$sound.play()
    },
    onNextPage () {
      this.$emit('next-page')
      this.$sound && this.$sound.play()
    },
    async onSubmit () {
      this.$sound && this.$sound.play()
      const loading = Toast.loading({
        message: 'Loading...',
        forbidClick: true,
        duration: 0
      })
      try {
        const { status, message } = await postLotteryInfo({ uname: this.uname, mobile: this.mobile, addr: this.addr })
        console.log()
        if (status <= 0) throw new Error(message)
        this.showPopup = true
      } catch (e) {
        Dialog.alert({ message: e.message })
      } finally {
        loading.clear()
      }
    },
    // 校验失败
    onFailed ({ errors }) {
      this.$sound && this.$sound.play()
      if (!errors.length) return
      const [{ message }] = errors
      Dialog.alert({
        message
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../assets/css/mixin.scss";
.lottery-form-page {
  background: url(../assets/img/form_page_bg.jpg) center center;
  background-size: cover;
}
.form-container {
  @include wh(660, 668);
  background: url(../assets/img/form_bg.png) center center no-repeat;
  background-size: 100% 100%;
  margin: 239px auto 88px;
  border-radius: 20px;
  overflow: hidden;
  padding: 57px 35px 55px 36px;
  text-align: center;
  .title {
    @include wh(151, 36);
  }
  .award-name {
    width: 100%;
    background-color: #b30305;
    font-size: 35px;
    height: 52px;
    line-height: 52px;
    color: #fff;
    border-radius: 26px;
    margin: 18px auto 38px;
  }
  .desc {
    @include wh(587, 136);
  }
}
.field-container {
  @include wh(575, 63);
  border: 2px solid #a40000;
  border-radius: 10px;
  overflow: hidden;
  padding: 4px;
  margin-top: 29px;
  > div {
    width: 100%;
    height: 100%;
  }
  em {
    padding: 0 0.25em;
  }
  ::v-deep(.van-field__label) {
    width: 138px;
    background-color: #a40000;
    color: #fff;
    text-align: center;
  }
  ::v-deep(.van-cell) {
    padding: 0;
  }
}
.btn-submit {
  @include wh(479,88);
  background: url(../assets/img/second/btn_bg.png) center no-repeat;
  background-size: 100% 100%;
  border: none;
  margin: 47px auto 0;
  color: #fff;
  display: block;
  font-size: 40px;
}
.submit_success_container {
  @include wh(592, 477);
  background: url(../assets/img/submit_success_bg.png) center no-repeat;
  background-size: 100% 100%;
  padding: 62px 75px 56px 74px;
  @include abs_center();
}
.submit_success_title {
  @include wh(443, 135)
}
.dialog_award_btn {
  @include wh(435, 77);
  background: url(../assets/img/dialog_btn_bg.png) center no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 36px;
  line-height: 77px;
  &.dialog_share_btn {
    margin: 43px auto 29px;
  }
}
.tips {
  @include wh(478, 518);
  margin: 90px auto 0 191px;
}
</style>
